<template>
  <view class="outer-container">
	  
    <view class="one">
		<text style="color: white; font-size: 50rpx; margin-left: 20rpx; display: block; line-height: 200rpx; float: left;" @click="fanhui">✖</text>
		<text style="color: white; margin-left: -20rpx; font-size: 46rpx; letter-spacing: 5rpx; display: block; text-align: center; line-height: 200rpx;">注册</text>
	</view>
	
    <view class="container">
      <form bindsubmit="onSubmit">
        <view class="form-item">
          <label>负责人：</label>
          <input name="responsiblePerson" placeholder="输入负责人姓名" placeholder-class="aaa" />
        </view>
        <view class="form-item">
          <label>身份证号码：</label>
          <input name="idNumber" placeholder="输入负责人身份证号码" maxlength="18" placeholder-class="aaa"/>
        </view>
        <view class="form-item">
          <label>手机号：</label>
          <input name="phoneNumber" placeholder="输入手机号" maxlength="11" placeholder-class="aaa"/>
        </view>
        <view class="form-item">
          <label>验证码：</label>
          <view class="code-input-container">
            <input name="verificationCode" placeholder-class="aaa" placeholder="输入验证码" maxlength="4" class="aaa" />
			<text style="color: #d7d7d7; margin-top: 5rpx; margin-right: 20rpx;">│</text>
			<text style="font-size: 28rpx; color: #4242c8; margin-top: 5rpx; font-weight: 550;">获取验证码</text>
          </view>
        </view>
        <view class="form-item">
          <label>店名：</label>
          <input name="storeName" placeholder="输入店名" placeholder-class="aaa"/>
        </view>
        <view class="form-item">
          <label>工商营业执照号码：</label>
          <input name="businessLicense" placeholder="输入营业执照号码" placeholder-class="aaa"/>
        </view>
        <view class="form-item">
          <label>经营区域：</label>
          <picker mode="selector" bindchange="onRegionChange" :range="regions" @change="onRegionChange">
            <view class="picker" style="color: #d7d7d7;">{{selectedRegion || '选择区县'}}</view>
          </picker>
        </view>
        <view class="form-item">
          <label>地址：</label>
          <input name="detailedAddress" placeholder="输入详细地址" placeholder-class="aaa"/>
        </view>
      </form>
    </view>
	
	<view class="two">
		<text style="font-weight: 550; font-size: 30rpx;">商家简介</text>
		<textarea style="border: 1rpx #d7d7d7 solid;" placeholder-class="ccc" type="text"  placeholder="请准确的介绍一下公司的情况"/>
	</view>
	
	<view class="three">
		<text style="float: left;">身份证正反面照片</text>
		<view class="sc" style="margin-left: -250rpx;">
			<text style="display: block; color: #9b9b9b; margin-top: 10rpx; font-size: 60rpx; text-align: center;">☠</text>
			<text style="color: #bfbfbf; font-size: 26rpx; margin-left: 10rpx;">上传人像面</text>
		</view>
		<view class="sc" style="margin-left: -50rpx;">
			<text style="display: block; color: #9b9b9b; margin-top: 10rpx; font-size: 60rpx; text-align: center;">☠</text>
			<text style="color: #bfbfbf; font-size: 26rpx; margin-left: 10rpx;">上传国徽面</text>
		</view>
	</view>
	
	<view class="four" style="height: 260rpx; width: 710rpx;">
		<text style="float: left;">营业执照和门店照片</text>
		<view class="sc" style="margin-left: -280rpx;">
			<text style="display: block; color: #9b9b9b; margin-top: 10rpx; font-size: 60rpx; text-align: center;">☠</text>
			<text style="color: #bfbfbf; font-size: 26rpx; margin-left: 10rpx;">上传人像面</text>
		</view>
		<view class="sc" style="margin-left: -80rpx;">
			<text style="display: block; color: #9b9b9b; margin-top: 10rpx; font-size: 60rpx; text-align: center;">☠</text>
			<text style="color: #bfbfbf; font-size: 26rpx; margin-left: 30rpx;">门店照片</text>
		</view>
	</view>
	
	<button class="ddd">注册</button>
	
  </view>
</template>

<script>
// Page({
//   data: {

//   },

export default{
	data(){
		return{
			regions: ["A县","B县"], // 示例区域
			selectedRegion: ''
		}
	},
	methods:{
		fanhui(){
			  uni.redirectTo({
			  	url: "/pages/lcl-DengLuZhuCe/denglu/denglu"
			  })
		},
		getCode: function() {
		    // 获取验证码逻辑
		    wx.showToast({
		      title: '验证码已发送',
		      icon: 'success'
		    });
		  },
		
		  onRegionChange: function(e) {
		    
		      this.selectedRegion = this.regions[e.detail.value]
		   
		  },
	
		  onSubmit: function(e) {
		    const formData = e.detail.value;
		    console.log('表单数据:', formData);
		    // 提交表单逻辑
		  }
	
	}
}
</script>

<style scoped>
.one {
  height: 400rpx;
  width: 100%;
  background-color: #1E90FF;
  position: absolute;
  z-index: 1;
}	

.aaa {
  color: #d7d7d7;
}

.form-item {
  margin-bottom: 15rpx;
  display: flex;
  align-items: center;
}

.code-input-container {
  /* display: flex; */
  /* align-items: center; */
  /* flex: 1; */
  margin-left: 140rpx;
  width: 440rpx;
  /* background-color: #6da781; */
  border-radius: 30rpx;
 border: 1rpx solid #ccc;
 padding: 10rpx 20rpx;
}

.code-input-container input{
	width: 200rpx;
	/* background-color: #28a745; */
	margin-left: -2rpx;
	border: none;
	float: left;
	padding: 0;
}



.outer-container {
	background-color: #f9f9f9;
	width: 100%;
  display: flex;
  padding-bottom: 200rpx;
  /* justify-content: center; /* 居中对齐  */
}

.container {
	z-index: 10;
  margin-left: 20rpx;
  margin-top: 200rpx;
  padding: 20rpx; /* 使用 rpx 单位 */
  background-color: #ffffff; /* 白色背景 */
  border-radius: 15rpx; /* 圆角 */
  box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1); /* 阴影效果 */
  width: calc(100% - 80rpx); /* 调整宽度以留有左右间距 */
  max-width: 800rpx; /* 增加最大宽度限制 */
  height: 640rpx;
}

.form-item {
  margin-bottom: 15rpx; /* 修改为 rpx */
  display: flex;
  align-items: center;
  /* width: 480rpx; */
}

label {
  width: 100rpx; /* 标签宽度 */
  color: #333;  /* 标签颜色 */
  font-size: 26rpx; /* 标签字体大小 */
  white-space: nowrap;
  font-weight: 550;
}

input {
  flex: 1;
  border: 1rpx solid #ccc; /* 边框 */
  border-radius: 30rpx; /* 圆角设置为 25rpx */
  padding: 10rpx 20rpx; /* 使用 rpx 单位 */
  font-size: 26rpx; /* 输入框字体大小 */
  /* width: 35%; /* 设置输入框宽度为 35% */
  width: 300rpx;
  margin-left: 140rpx;
}

.get-code-btn, .submit-btn {
  margin-left: 10rpx; /* 修改为 rpx */
  background-color: #1E90FF; /* 按钮背景色 */
  color: white;
  border: none;
  padding: 8rpx 12rpx; /* 按钮内边距 */
  border-radius: 4rpx; /* 圆角 */
  font-size: 14rpx; /* 按钮字体大小 */
}

.get-code-btn {
  width: 100rpx; /* 设置获取验证码按钮的宽度 */
}

.picker {
  flex: 1;
  height: 44rpx; /* 和输入框一致的高度 */
  line-height: 44rpx; /* 垂直居中 */
  border: 1rpx solid #ccc; /* 边框 */
  border-radius: 25rpx; /* 圆角 */
  padding: 0 60rpx; /* 左右内边距 */
  margin-left: 140rpx;
  color: #666; /* 默认字体颜色 */
  font-size: 24rpx;
}

.picker:hover {
  border-color: #1E90FF; /* 悬停时边框颜色 */
}


.two{
	background-color: #ffffff;
	box-shadow: 0 5rpx 10rpx rgba(0, 0, 0, 0.2);
	width: 710rpx;
	height: 380rpx;
	margin: 0 auto;
	/* background-color: #d2ffd2; */
	margin-top: 910rpx;
	margin-left: -710rpx;
	border-radius: 15rpx;
	box-sizing: border-box;
	padding: 30rpx 20rpx;
}
.two textarea{
	border-radius: 25rpx;
	width: 640rpx;
	height: 200rpx;
	margin-left: -10rpx;
	padding: 20rpx;
	margin-top: 20rpx;
	
}
.ccc{
	font-size: 26rpx;
	font-weight: 550;
	color: #cacaca;
}


.three{
	background-color: #ffffff;
	box-shadow: 0 5rpx 10rpx rgba(0, 0, 0, 0.2);
	width: 710rpx;
	height: 300rpx;
	position: absolute;
	top: 1320rpx;
	left: 20rpx;
	/* background-color: coral; */
	border-radius: 15rpx;
	box-sizing: border-box;
	padding: 30rpx 20rpx;
}
.sc{
	/* background-color: #ebebeb; */
	width: 160rpx;
	height: 160rpx;
	border-radius: 15rpx;
	margin-top: 60rpx;
	border: 1rpx solid #c8c8c8;
	background-image: linear-gradient(to bottom, white, white, #dcdcdc);
	box-shadow: 0 2rpx 5rpx rgba(0, 0, 0, 0.2);
	float: left;
	margin-right: 40rpx;
}


.four {
  background-color: #ffffff;
  width: 710rpx; /* 或者其他你希望的宽度 */
  box-shadow: 0 5rpx 10rpx rgba(0, 0, 0, 0.2);
  height: 280rpx;
  /* position: relative; */
  /* top: 1720rpx; */
  /* left: -600rpx; */
  /* background-color: coral; */
  border-radius: 15rpx;
  /* box-sizing: border-box; */
  padding: 30rpx 20rpx;
  margin-top: 1640rpx;
  margin-left: -710rpx;
  margin-right: 20rpx;
  margin-bottom: 100rpx;
}


.five{
	width: 400rpx;
	height: 100rpx;
	background-color: #1E90FF;
}


.ddd{
	position: absolute;
	width: 600rpx;
	height: 100rpx;
	background-color: #1E90FF;
	top: 2050rpx;
	left: 70rpx;
	color: white;
	font-weight: 550;
	letter-spacing: 5rpx;
	margin-bottom: 200rpx;
	border-radius: 45rpx;
}
</style>
